<template>
  <div>
    <el-drawer
      title="导入"
      :visible.sync="drawer"
      :before-close="handleClose"
      :wrapperClosable="false"
    >
      <div class="drawerCenter">
        <div class="drawerUpload" v-if="isShow">
          <div class="drawerTitle">
            <i class="iconfont icon-xiazaimoban"></i>下载模板
          </div>
          <div class="drawerTips">
            为保证成功导入文件，请务必使用系统提供的导入模板
          </div>
          <el-button type="primary" plain @click="aDown">模板下载 </el-button>
        </div>

        <div class="drawerUpload">
          <div class="drawerTitle">
            <i class="iconfont icon-shangchuanwenjian"></i>上传文件
          </div>
          <div class="drawerTips" v-if="Ones">
            请先选中文件再点击上传按钮，上传文件
          </div>
          <div class="drawerTips" v-else-if="Twos">
            此导入会覆盖原本的卷内目录，请慎重操作
          </div>
          <div class="drawerTips" v-else-if="Threes">仅支持xlsx,xls文件</div>

          <el-upload
            class="upload-demo"
            :action="action"
            :multiple="multiple"
            :headers="headers"
            :data="table"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
          >
            <i class="el-icon-upload wenjian"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </div>
        <div slot="footer" class="dialog-footer" v-if="Show">
          <el-button type="primary" @click="Submit">上 传</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { OneUP, UPList, fileUPList } from "../../api/Template/index";
export default {
  props: {
    table: { type: Object },
    num: { type: String },
  },
  data() {
    return {
      orgPath: null, // 组织路径
      uploadData: {
        company_id: sessionStorage.getItem("companyId"),
      },
      multiple: true,
      file_urls: [],
      file_urls2: [],
      Show: false,

      file_url: "",
      isShow: true,
      Ones: false,
      Twos: false,
      Threes: true,
      fileList: [],
      drawer: false,
      action: "",
      action2: "/api/book_titles/import", // 案卷导入
      action3: "/api/book_catalogs/import", // 卷内导入
      action4: "/api/attachment/upload", // 文件上传
      action5: "/api/organized/user_import", // 成员上传
      action6: "/api/book_titles/batch_import_pdf_in_title", // 成员上传
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    };
  },

  methods: {
    // 本地文件下载
    aDown() {
      let name = this.num;
      let host = localStorage.getItem("host");
      let link = document.createElement("a");
      if (name == "anjuan29") {
        link.setAttribute("href", host + "/api/index/example_template?type=3");
        link.setAttribute("download", `导入案卷模板`);
        link.click();
      } else if (name == "juannei29") {
        link.setAttribute("href", host + "/api/index/example_template?type=4");
        link.setAttribute("download", `导入卷内模板`);
        link.click();
      } else if (name == "anjuan8") {
        link.setAttribute("href", host + "/api/index/example_template?type=5");
        link.setAttribute("download", `导入案卷模板`);
        link.click();
      } else if (name == "juannei8") {
        link.setAttribute("href", host + "/api/index/example_template?type=6");
        link.setAttribute("download", `导入卷内模板`);
        link.click();
      } else if (name == "zzjg") {
        link.setAttribute("href", host + "/api/index/example_template?type=1");
        link.setAttribute("download", `批量导入用户模板`);
        link.click();
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      /*   console.log("123");
      console.log(response.data, "11"); */
      if (response.code == 200) {
        this.$message({
          message: response.msg,
          type: "success",
        });
      } else if (response.code != 200) {
        this.$message({
          message: response.msg,
          type: "error",
        });
      }

      /*  console.log(this.file_urls);
      console.log(this.file_url);
      console.log(typeof this.file_url.book_catalog_id); */
      if (this.file_url.book_catalog_id) {
        this.file_url.file_url = response.data.file;
        this.ONes();
      } else if (this.num == "pdflist") {
        /*   console.log(this.file_urls); */
        this.file_urls.file_urls.push(response.data);
        console.log(this.file_urls);
      } else if (this.num == "filepdfList") {
        /*  console.log(this.file_urls); */
        this.file_urls2.file_urls.push(response.data);
        console.log(this.file_urls2);
      }
    },
    Submit() {
      let name = this.num;
      if (name == "pdflist") {
        this.LIst();
      } else if (name == "filepdfList") {
        this.fileUPList();
      }
    },
    handleAvatarError() {
      this.$message.error("抱歉，文件上传失败");
    },
    loadData() {
      let name = this.num;
      console.log(name);
      if (name == "anjuan29") {
        this.action = this.action2;
        this.isShow = true;
        this.Threes = true;
        console.log(this.isShow);
      } else if (name == "juannei29") {
        this.action = this.action3;
        this.isShow = true;
        console.log(1);
        console.log(this.table);
        this.Twos = true;
        console.log(this.isShow);
      } else if (name == "anjuan8") {
        this.action = this.action2;
        this.isShow = true;
        this.Threes = true;
        console.log(this.isShow);
      } else if (name == "juannei8") {
        this.action = this.action3;
        this.isShow = true;
        console.log(1);
        console.log(this.table);
        this.Twos = true;
        console.log(this.isShow);
      } else if (name == "pdfone") {
        this.action = this.action4;
        this.file_url = this.table;
        this.isShow = false;
        this.Threes = true;
        console.log(this.isShow);
      } else if (name == "pdflist") {
        this.action = this.action4;
        this.file_urls = this.table;
        this.isShow = false;
        this.Ones = true;
        this.Show = true;
        console.log(this.isShow);
      } else if (name == "filepdfList") {
        this.action = this.action4;
        this.file_urls2 = this.table;
        this.isShow = false;
        this.Ones = true;
        this.Show = true;
        console.log(this.isShow);
      } else if (name == "zzjg") {
        this.action = this.action5;
        this.isShow = true;
        this.Threes = true;
        console.log(this.isShow);
      }
    },
    async ONes() {
      let res = await OneUP(this.file_url);
      console.log(res);
    },
    async LIst() {
      if (!this.file_urls.file_urls.length) {
        this.$message({
          showClose: true,
          message: "请先选中文件",
          type: "error",
        });
      } else {
        let res = await UPList(this.file_urls);
        /* console.log(res); */
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
          this.close();
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      }
    },
    async fileUPList() {
      if (!this.file_urls2.file_urls.length) {
        this.$message({
          showClose: true,
          message: "请先选中文件",
          type: "error",
        });
      } else {
        let res = await fileUPList(this.file_urls2);
        /* console.log(res); */
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
          this.close();
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      }
    },
    close() {
      this.drawer = false;
      this.$emit("closeDrawer", false);
    },
    open2() {
      this.drawer = true;
    },
    handleClose() {
      this.close();
    },
  },
  created() {
    this.loadData();
  },
};
</script>


<style scoped lang="less">
.drawerCenter {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
}
.drawerUpload {
  &:last-child {
    margin-top: 100px;
  }

  .drawerTitle {
    font-size: 20px;
    font-weight: 600;
    color: #2b2b4c;
    margin-bottom: 15px;
  }

  .drawerTips {
    color: #a2a2a2;
    margin: 0 0 25px;
  }
}
.wenjian {
  font-size: 55px;
}
.upload-demo {
  border: 1px dashed rgb(241, 241, 241);
  padding: 40px 20px 60px 140px;
}
/deep/.el-upload__text {
  font-size: 14px;
  em {
    color: #409fee;
  }
}
.dialog-footer {
  margin: 20px auto;
  text-align: center;
  box-sizing: border-box;
}
</style>
